<template>
    <div>
        <h3>{{viewData.viewTitle}}</h3>
        <div ref="lineEcharts" class="fl echarts" :style="{width:'100%',height:viewData.viewHeight}"></div>
    </div>
</template>
<script>
import echarts from "echarts"
import {queryApi, fileUpload, fileUploadvideo} from '@/api/api'
export default {
    props:{
        viewData:{
            viewTitle:'',
            viewHeight:'',
            seiveApi:'',
            serachParam:{},
            options:{
                xAxis:{
                    spiltLine:{
                        show:true
                    },
                    axisLabel:{
                        color:'',
                        fontSize:''
                    },
                    data:[]
                },
                yAxis:{
                    axisLabel: { //y轴样式
                        color: '',
                        fontSize:""
                    },
                },
                seriesData:[],
                tooltip:{
                    show:'',
                }
            }   
        }
    },
    data() {
        return {
        };
    },
    methods: {
        init(){
            var echartsNew = this.$echarts.init(this.$refs.lineEcharts);
            var seriesData = [];
            if(this.viewData.seiveApi!=''){
                queryApi(this.viewData.serachParam).then(res => {
                    var json = res.data;
                    if(json.code == '000000'){
                        seriesData = json.series;
                    }
                })
            }else{
                seriesData = this.viewData.options.seriesData
            }
            var options = {
                xAxis: {
                    type: 'category',
                    axisLabel:{
                        color:this.viewData.options.xAxis.axisLabel.color,
                        fontSize:this.viewData.options.xAxis.axisLabel.fontSize
                    },
                    data: this.viewData.options.xAxis.data
                },
                yAxis: {
                    type:'value',
                    axisLabel:{
                        color:this.viewData.options.yAxis.axisLabel.color,
                        fontSize:this.viewData.options.yAxis.axisLabel.fontSize
                    }
                },
                tooltip: {
                    show:this.viewData.options.tooltip.show,
                    trigger: 'item'
                },
                series: seriesData
            };
            echartsNew.setOption(options,true);
        }
    },
    mounted(){
        this.init();
    }
}
</script>